<template>
  <div id="app">
    <div class="nav">
      <div class="logo">
        <img src="./assets/logo.png" alt="logo" />
      </div>
      <nav>
        <router-link to="/home">主页1</router-link>
        <router-link to="/home2">主页2</router-link>
        <router-link to="/login">登录</router-link>
      </nav>
    </div>
    <router-view />
  </div>
</template>


<style scoped>
#app {
  width: 100%;
}

#app .nav {
  width: 100%;
  height: 80px;
  display: flex;
  /* position: fixed; */
  justify-content: space-between;
  padding: 0 30px;
  /* background: #333; */
  background: #333333d3;
  z-index: 9999 ;
  box-sizing: border-box;
}

#app .nav .logo {
  display: flex;
  align-items: center;
}

#app .nav .logo img {
  width: 60px;
  height: auto;
}

#app .nav nav {
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

#app .nav nav a {
  color: #fff;
  text-decoration: none;
  padding: 0 20px;
}
#app .nav nav a.router-link-exact-active {
  color: #3eaf7c;
}
</style>>
